export default {
    data: {
        styles:{
            textColor:'#3c3e49',
            buttonColor:'#3c3e49',
            backgroundColor:'white',
            selectedColor:'#2597EB'
        },
        circle_position:'circle_rightBottom',
        content_position:'rightBottom',
        activeItem: {},
        isShow : false
    },
    props:{
        content: {
            type: Array,
            default () {
                return []
            }
        },
        pattern: {
            type: Object,
            default () {
                return {}
            }
        },
        horizontal: {
            type: String,
            default: 'left'
        },
        vertical: {
            type: String,
            default: 'bottom'
        },
        direction: {
            type: String,
            default: 'horizontal'
        },
        autoClose:{
            type: Boolean,
            default: false
        },
        defaultShow: {
            type: Boolean,
            default: true
        }
    },
    computed:{
        contentWidth() {
            return (this.content.length + 1) * 60 + 10 + 'px'
        },
        contentWidthMin() {
            return 65 + 'px'
        },
        leftBottom() {
            return this.getPosition(0, 'left', 'bottom')
        },
        rightBottom() {
            return this.getPosition(0, 'right', 'bottom')
        },
        leftTop() {
            return this.getPosition(0, 'left', 'top')
        },
        rightTop() {
            return this.getPosition(0, 'right', 'top')
        },
        flexDirectionStart() {
            return this.getPosition(1, 'vertical', 'top')
        },
        flexDirectionEnd() {
            return this.getPosition(1, 'vertical', 'bottom')
        },
        horizontalLeft() {
            return this.getPosition(2, 'horizontal', 'left')
        },
        horizontalRight() {
            return this.getPosition(2, 'horizontal', 'right')
        },
        boxWidth() {
            return this.getPosition(3, 'horizontal')
        },
        boxHeight() {
            return this.getPosition(3, 'vertical')
        },
        flex_direction(){
            return this.direction.toString() == 'vertical' ? 'column':'row';
        }
    },
    getPosition(types, paramA, paramB) {
        if (types === 0) {
            return this.horizontal === paramA && this.vertical === paramB
        } else if (types === 1) {
            return this.direction === paramA && this.vertical === paramB
        } else if (types === 2) {
            return this.direction === paramA && this.horizontal === paramB
        } else {
            return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin;
        }
    },
    onInit() {
        this.$watch('pattern', 'onPatternChange');
    },
    onPatternChange(newV, oldV){
        Object.assign(this.styles, newV);
    },
    onClick(){
        this.$emit('circleClick');
        this.isShow=!this.isShow;
    },
    onItemClick(index, item){
        item.active=true;
        this.content.filter(arr=>{
            if(arr.text==item.text){
                arr.active=true;
                this.activeItem=item;
            }else{
                arr.active=false;
            }
        });
        if(this.autoClose){
            this.isShow= false;
        }
        this.$emit('itemClick',{index,item});
    },
    onAttached(){
        Object.assign(this.styles, this.pattern);
        this.isShow = this.defaultShow;
        if(this.leftBottom){
            this.circle_position='circle_leftBottom';
            this.content_position='leftBottom';
        }
        if(this.rightBottom){
            this.circle_position='circle_rightBottom';
            this.content_position='rightBottom';
        }
        if(this.leftTop){
            this.circle_position='circle_leftTop';
            this.content_position='leftTop';
        }
        if(this.rightTop){
            this.circle_position='circle_rightTop';
            this.content_position='rightTop';
        }
        this.content.filter(item=>{
            if(item.active){
                this.activeItem=item;
                return
            }
        });
    }
}
